<template>
    <el-dialog v-model="dialogVisible" title="问题详情" width="1200" class="problem-detail-dialog">
        <el-form :model="problemForm" label-width="100px" label-position="left" class="problem-form">
            <div class="problem-form-title">问题情况</div>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="通知单号:">
                        {{ problemForm.noticeCode }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="油库名称:">
                        {{ problemForm.name }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="检查类型:">
                        {{ problemForm.checkType }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="问题级别:">
                        {{ problemForm.level }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="责任分组:">
                        {{ problemForm.dutyGroup }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="考核月份:">
                        {{ problemForm.month }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="16">
                    <el-form-item label="问题类别:">
                        {{ problemForm.problemCategorize }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="整改期限:">
                        {{ problemForm.correctionPeriod }}
                    </el-form-item>
                </el-col>

            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="存在问题:">
                        {{ problemForm.problem }}
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="创建人:">
                        {{ problemForm.createdBy }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="创建日期:">
                        {{ problemForm.createdDate }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="状态:">
                        {{ problemForm.status }}
                    </el-form-item>
                </el-col>
            </el-row>
            <div class="problem-form-title">整改情况</div>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="通知书状态:">
                        {{ problemForm.noticeStatus }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="整改回复人:">
                        {{ problemForm.replyBy }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="问题责任人:">
                        {{ problemForm.responsibleBy }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="整改情况:">
                        {{ problemForm.correction }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="处理意见:">
                        {{ problemForm.handleOpinion }}
                    </el-form-item>
                </el-col>

            </el-row>
            <el-row :gutter="20">
                <el-col :span="16">
                    <el-form-item label="违规标准:">
                        {{ problemForm.violationStandard }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="处理方式:">
                        {{ problemForm.handleType }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="回复时间:">
                        {{ problemForm.replyTime }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="回复状态:">
                        {{ problemForm.replyStatus }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="退回记录:">
                        {{ problemForm.returnRecord }}
                    </el-form-item>
                </el-col>
            </el-row>
            <div class="problem-form-title">验收情况</div>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="验收人:">
                        {{ problemForm.acceptanceBy }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="验收意见:">
                        {{ problemForm.acceptanceOpinion }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="验收评价:">
                        {{ problemForm.acceptanceEvaluate }}
                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>
    </el-dialog>
</template>
<script setup lang="ts">


import { onMounted, reactive, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
// import { getDetail } from '@/api/index.ts';

// 主键
const id = ref<string>('');
const route = useRoute();

const props = defineProps({
    problemId: {
        type: String,
        required: true
    }
})

const dialogVisible = ref<boolean>(false)

watch(() => dialogVisible.value, (newVal) => {
    if (newVal) {
        getData();
    }
})

function getData() {
    // props.problemId && getDetail(props.problemId).then(res => {
    // Object.assign(problemForm, res.data)
    // })
}


interface ProblemFormType {
    noticeCode?: string,
    name?: string,
    checkType?: string,
    level?: string,
    dutyGroup?: string,
    problemCategorize?: string,
    month?: string,
    problem?: string,
    correctionPeriod?: string,
    createdBy?: string,
    createdDate?: string,
    status?: string,
    remark?: string,
    id?: number,
    noticeStatus?: string,
    replyBy?: string,
    responsibleBy?: string,
    correction?: string,
    files?: Array<any>,
    handleOpinion?: string,
    violationStandard?: string,
    handleType?: string,
    replyTime?: string,
    replyStatus?: string,
    returnRecord?: string,
    systemTag?: string,
    acceptanceBy?: string,
    acceptanceOpinion?: string,
    acceptanceEvaluate?: string,
}

const problemForm = reactive<ProblemFormType>({
    noticeCode: 'CFC-2023-001',
    name: '张三',
    checkType: '日常检查',
    level: '一般',
    dutyGroup: '生产部',
    problemCategorize: '设备故障',
    month: '2023-01',
    problem: '设备A出现故障，无法正常工作',
    correctionPeriod: '2023-01-10',
    createdBy: '李四',
    createdDate: '2023-01-01',
    status: '待整改',
    remark: '无',
    id: 1,
    noticeStatus: '已阅',
    replyBy: '张三',
    responsibleBy: '李四',
    correction: '整改完了',
    handleOpinion: '没意见',
    violationStandard: '没标准',
    handleType: '不做处理',
    replyTime: '2023-01-01',
    replyStatus: '已回复',
    returnRecord: '暂无',
    systemTag: '暂无',
    acceptanceBy: '王五',
    acceptanceOpinion: '验收',
    acceptanceEvaluate: '五星',
})

defineExpose({
    dialogVisible
})

</script>
<style lang="scss" scoped>



:deep(.el-form-item__content) {
    font-size: 18px;
}

:deep(.el-form-item__label) {
    font-size: 16px;
    color: rgba(255,255,255,.8) !important;
}
</style>